<template>
  <EvModal
    :loading="loading"
    v-model="visible"
    :config="{
      options: { title: '加载中', showFooter: false, showHeader: false, width: '650px' },
      events: {},
    }"
  >
    <div class="w-full flex flex-col justify-center items-center">
      <slot></slot>
      <n-progress
        type="line"
        :processing="progress !== 100"
        :status="props.progress !== 100 ? '' : 'success'"
        :percentage="props.progress"
        :height="24"
        indicator-placement="inside"
      >
      </n-progress>
    </div>
  </EvModal>
</template>

<script setup>
import { computed, shallowRef } from 'vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  progress: {
    type: Number,
    default: 0,
  },
});

// 自定义组件双向绑定
const emits = defineEmits(['update:modelValue']);
const loading = shallowRef(false);
const visible = computed({
  get: () => props.modelValue,
  set: (newV) => emits('update:modelValue', newV),
});
</script>

<style scoped lang="scss"></style>
